<script setup lang="ts">
import bg from '@/assets/img/home.png'
import { useRoute, useRouter } from 'vue-router'

const whiteList = ['/home']
const specialList = ['/introduce/chat']
const router = useRouter()
const route = useRoute()

function back() {
  if (specialList.includes(route.path)) {
    router.replace('/introduce')
  } else {
    router.back()
  }
}
</script>

<template>
  <div id="main" :style="{ background: `url(${bg})`, backgroundSize: '100% 100%' }">
    <div
      v-if="!whiteList.includes(route.path)"
      class="back w-14 hover:opacity-80 h-14 rounded-full fixed top-5 left-5"
      @click="back"
    ></div>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<style lang="scss" scoped>
#main {
  height: 100vh;
  overflow: scroll;
}
.back {
  background: url('../assets/img/back.png');
  background-size: 100% 100%;
  position: relative;
  z-index: 10;
}
</style>
